/*
  学习目标：组件卸载后, 再次挂载, 数据不清空为0
  核心点: 使用Redux保存数据
 
*/

import { useEffect } from "react";
import { useState } from "react";
import store from "./store/index";

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show && <Son />}
    </div>
  );
}

function Son() {
  // 1. 从redux中获取state, 作为初始值
  const [count, setCount] = useState(store.getState().count);

  // 💥 Redux中的state, 只是普通的JS数据, 不会驱动视图
  // 💥 React中的state, 才会驱动视图变化

  useEffect(() => {
    // 3. 监听仓库数据变化，同步给React中的state
    const unFn = store.subscribe(() => {
      setCount(store.getState().count);
    });

    return () => {
      unFn();
    };
  }, []);

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button
        // 2. +1 点击事件, dispatch修改redux中的count
        onClick={() => store.dispatch({ type: "add" })}
      >
        +1
      </button>
      <button onClick={() => store.dispatch({ type: "des" })}>-1</button>
    </div>
  );
}
